import React from 'react';
import { Button, message } from 'antd';
import { WeaLocaleProvider, WeaDialog, WeaInput, WeaInputSearch } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import MaterialLib from './MaterialLib';

class WeaMaterialLib extends React.Component {
    state = { visible: false, loading: false, value: this.props.value };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onLoading = this.onLoading.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onClear = this.onClear.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onShow = this.onShow.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ value: nextProps.value });
    }

    render() {
        const { type, value, disabled, multiCheck, isShow } = this.props;
        const { visible, loading } = this.state;

        let displayComp = <div />;
        if (type == 'button') {
            displayComp = <div onClick={this.onShow}>{this.props.children}</div>;
        } else {
            displayComp = <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@2waixn`} style={{ width: '100%' }} value={value} onSearchChange={this.onChange} onSearch={this.onShow} />;
        }

        if (disabled) {
            displayComp = <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@2o4hnh`} value={value} disabled={true} />;
        }

        return (
            <div>
                {displayComp}
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rtq1x2`}
                  visible={visible}
                  loading={loading}
                  title={getLabel(32467, '图片素材库')}
                  icon="icon-coms-portal"
                  iconBgcolor="#1a57a0"
                  style={{ width: document.body.clientWidth - 300, height: document.body.clientHeight - 200 }}
                  buttons={this.getButtons()}
                  onCancel={this.onCancel}
                >
                    <MaterialLib ecId={`${this && this.props && this.props.ecId || ''}_MaterialLib@nb74gv`} ref="ml" multiCheck={multiCheck} onLoading={this.onLoading} isShow={isShow} />
                </WeaDialog>
            </div>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3hql1e`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        // buttons.push(<Button type="primary" onClick={this.onClear}>{getLabel(311, '清除')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8rlnif`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onLoading(loading) {
        this.setState({ loading });
    }

    onShow() {
        this.setState({ visible: true });
        this.refs.ml && this.refs.ml.setVisible({ visible: true });
    }

    onOk() {
        const checkedFiles = this.refs.ml.getCheckedFiles();

        if (checkedFiles && checkedFiles.length) {
            const filepaths = checkedFiles.map(item => item.filepath);
            this.onChange(filepaths.join(','));
            this.refs.ml.setVisible(false);
            this.setState({ visible: false });
        } else {
            message.warning(getLabel(84570, '请选择目标！'));
        }
    }

    onClear() {
        this.onChange('');
        this.refs.ml.setVisible(false);
        this.setState({ visible: false, value: '' });
    }

    onCancel() {
        this.refs.ml.setVisible(false);
        this.setState({ visible: false });
    }

    onChange(value) {
        this.props.onChange(value);
    }
}

export default WeaMaterialLib;
